<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <TreeTools :node-data="company" :is-root="true" @addDepartments="addDepartments" />
        <hr>
        <!-- el-tree会遍历绑定的数据后,使用template 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据-->
        <el-tree :data="treeData" default-expand-all>
          <!-- 模板template,eltree每遍历数据套用一个模板渲染当前对象的数据 -->
          <!-- #default=obj  作用域插槽接收node数据,obj就是{node,data} -->
          <template #default="obj">
            <!-- 接收子组件的通知:@子组件的通知函数名="父组件需要执行的事件"  此处是接收到删除数据的通知所以父组件需要及时更新数据-->
            <!-- 这里的第一个addDepartments是treetools通知传递的事件名 -->
            <!-- 第二个addDepartments表示父组件定义的函数名,在该函数执行代事件,此处执行树形组件弹出新增部门弹窗 -->
            <!-- 这里的node.data是该节点的数据 -->
            <TreeTools
              :node-data="obj.data"
              @delDepartments="getDepartments"
              @addDepartments="addDepartments"
              @editDepartments="editDepartments"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- show为子组件接收父组件传递参数的变量 -->
      <!-- vue语法:加上修饰符.sync,可以接收$emit通知 -->
      <!-- 这里的addDepartments表示确认添加部门 -->
      <!-- getDepartments执行更新页面数据 -->
      <!-- ref获取当前dom元素,$refs可以调用这个组件的函数或属性方法 -->
      <AddDept ref="AddDept" :show.sync="showDialog" :node-data="nodeData" @addDepartments="getDepartments" />
    </div>
  </div>
</template>

<script>
import TreeTools from './compnents/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { listToTreeData } from '@/utils/index'
import AddDept from './compnents/add-dept.vue'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {
        name: '澳门家里蹲赌场黄埔分公司',
        manager: '负责人',
        id: ''
      },
      treeData: [],
      showDialog: false,
      nodeData: {}
    }
  },
  async created() {
    // 创建周期,更新数据
    this.getDepartments()
  },

  methods: {
    // 封装获取部门数据函数
    async getDepartments() {
      // 解构出res.depts数据
      const { depts } = await getDepartments()
      // 此处调用数据树形处理函数,将次级数据放到顶级部门的children里面
      this.treeData = listToTreeData(depts, '')
    },

    // 接收到点击新增部门通知,将showDialog变为true,这里接收treetools传入的nodeData
    addDepartments(nodeData) {
      this.showDialog = true
      this.nodeData = nodeData
    },
    // 接收到点击编辑部门通知
    async editDepartments(nodeData) {
      // nodeData从treetool传出,父组件接收,现在再传给弹窗组件
      this.nodeData = nodeData
      // $refs.组件 调用该组件的函数
      await this.$refs.AddDept.getDeptDetail(nodeData.id)
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  100px;
  font-size:14px;
}

.el-dropdown{
  cursor: pointer;
}
</style>
